/**
 * @param type 弹窗类型，值：warn:疑问弹窗（含两个按钮），info:信息弹窗（含一个按钮），error:错误弹窗（含一个按钮），可选项，默认“info”
 * @param title 标题提示，可选项，默认"提示"
 * @param content 内容信息文字，可选项
 * @param confirm 确认按钮的回调函数，可选项
 * @param cancel 取消按钮的回调函数，可选项
 * 用法：
 * 例1：dialog({type:'info',title:'提示',content:'登录成功'});
 * 例2：dialog({title:'退出成功',content:'您已退出本系统'});
 * 例3：dialog({
 * 			type:'warn',
 * 			title:'是否退出登录？',
 * 			confirm:function(){
 * 				//alert("退出成功");
 * 			},
 * 		});
 * @version 1.0.0
 * @date 2018-12-21
 */
function dialog(json){
	var type = json.type || 'info';
	var title = json.title || '提示';
	var content = json.content || '';
	var confirm = typeof json.confirm == 'function'? json.confirm : function(){};
	var cancel = typeof json.cancel == 'function'? json.cancel : function(){};
	
	var $w = window.innerWidth;
	var $h = window.innerHeight;
	
	var containerDom = document.createElement('div');
	containerDom.style.width = $w + "px";
	containerDom.style.height = $h + "px";
	containerDom.style.position = "fixed";
	containerDom.style.top = "0";
	containerDom.style.left = "0";
	containerDom.style.zIndex = "999";
	
	var maskDom = document.createElement('div');
	maskDom.style.width = $w + "px";
	maskDom.style.height = $h + "px";
	maskDom.style.position = "fixed";
	maskDom.style.top = "0";
	maskDom.style.left = "0";
	maskDom.style.background = "#000000";
	maskDom.style.opacity = "0.3";
	
	var bodyDom = document.createElement("div");
	bodyDom.style.width = $w + "px";
	bodyDom.style.height = $h + "px";
	bodyDom.style.position = "fixed";
	bodyDom.style.top = "0";
	bodyDom.style.left = "0";
	bodyDom.style.display = "flex";
	bodyDom.style.justifyContent = "center";
	bodyDom.style.alignItems = "center";
	
	var infoDom = document.createElement("div");
	infoDom.style.width = "400px";
	infoDom.style.background = "#FFFFFF";
	infoDom.style.borderRadius = "5px";
	infoDom.style.boxShadow = "0 3px 6px 2px rgba(0,0,0,.16)";
	infoDom.style.boxSizing = "border-box";
	infoDom.style.padding = "10px 20px";
	
	var titleDom = document.createElement("div");
	titleDom.style.color = "#4B4B4B";
	titleDom.style.fontWeight = "bold";
	
	var iconDom = document.createElement("span");
	iconDom.style.display = "inline-block";
	iconDom.style.width = "20px";
	iconDom.style.height = "20px";
	iconDom.style.lineHeight = "20px";
	iconDom.style.textAlign = "center";
	iconDom.style.borderRadius = "20px";
	
	var textDom = document.createElement("span");
	textDom.style.color = "#4B4B4B";
	textDom.style.fontWeight = "bold";
	textDom.style.boxSizing = "border-box";
	textDom.style.marginLeft = "10px";
	
	var contentDom = document.createElement("div");
	contentDom.style.boxSizing = "border-box";
	contentDom.style.padding = "10px 0";
	contentDom.style.color = "#999999";
	contentDom.style.fontSize = "15px";
	
	var buttonDom = document.createElement("div");
	buttonDom.style.boxSizing = "border-box";
	buttonDom.style.paddingTop = "20px";
	buttonDom.style.width = "100%";
	buttonDom.style.textAlign = "center";
				
	var confirmDom = document.createElement("span");
	confirmDom.style.display = "inline-block";
	confirmDom.style.width = "70px";
	confirmDom.style.height = "30px";
	confirmDom.style.lineHeight = "30px";
	confirmDom.style.textAlign = "center";
	confirmDom.style.background = "#4E9FEE";//淡蓝色 //"#5DC2D0";//墨绿色，"#389FED"//蓝色;
	confirmDom.style.color = "#FFFFFF";
	confirmDom.style.borderRadius = "5px";
	confirmDom.style.cursor = 'pointer';
	confirmDom.innerHTML = "确定";
	
	var cancelDom = document.createElement("span");
	cancelDom.style.display = "inline-block";
	cancelDom.style.width = "70px";
	cancelDom.style.height = "30px";
	cancelDom.style.lineHeight = "30px";
	cancelDom.style.textAlign = "center";
	cancelDom.style.background = "#999999";
	cancelDom.style.color = "#FFFFFF";
	cancelDom.style.borderRadius = "5px";
	cancelDom.style.boxSizing = "border-box";
	cancelDom.style.marginLeft = "30px";
	cancelDom.style.cursor = 'pointer';
	cancelDom.innerHTML = "取消";
	
	if(type == "warn"){
		iconDom.style.color = "#ffd164";
		iconDom.style.border = "2px solid #ffd164";
		iconDom.innerHTML = "?";
	}else if(type == "error"){
		iconDom.style.color = "#d81e06";
		iconDom.style.border = "2px solid #d81e06";
		iconDom.innerHTML = "!";
	}else{
		iconDom.style.color = "#389eec";
		iconDom.style.border = "2px solid #389eec";
		iconDom.innerHTML = "i";
	}
	
	
	containerDom.appendChild(maskDom);
	containerDom.appendChild(bodyDom);
	bodyDom.appendChild(infoDom);
	if(title != ""){
		textDom.innerHTML = title;
		infoDom.appendChild(titleDom);
	}
	if(content != ""){
		contentDom.innerHTML = content;
		infoDom.appendChild(contentDom);
	}
	infoDom.appendChild(buttonDom);
	
	titleDom.appendChild(iconDom);
	titleDom.appendChild(textDom);
	
	buttonDom.appendChild(confirmDom);
	if(type == "warn"){
		buttonDom.appendChild(cancelDom);
	}
	confirmDom.onclick = function(){
		confirm();
		document.body.removeChild(containerDom);
	}
	cancelDom.onclick = function(){
		cancel();
		document.body.removeChild(containerDom);
	}
	document.body.appendChild(containerDom);
}
